<script src="../../store/index.js"></script>
<template>
  <view class="container">
    <view class="tui-bg-box">
      <image class="tui-bg-img" src="../../static/images/login/bg_login.png"></image>
      <image class="tui-photo" src="../../static/images/my/mine_def_touxiang_3x.png"></image>
      <view class="tui-login-name">Somliy</view>
    </view>
    <form @submit="formLogin">
      <view class="tui-login-from">
        <view class="tui-line-cell">
          <tui-icon color='#5677fc' name="username" size="20"></tui-icon>
          <input class="tui-input" maxlength="11" name="username" placeholder="请输入用户名" placeholder-class="phcolor"
                 type="number"
                 v-model="loginMessage.username"/>
        </view>
        <view class="tui-line-cell">
          <tui-icon color='#5677fc' name="password" size="20"></tui-icon>
          <input class="tui-input" maxlength="11" name="password" placeholder="请输入密码" placeholder-class="phcolor"
                 type="password"
                 v-model="loginMessage.password"/>
        </view>
        <button class="btn-primary tui-btn-submit" form-type="submit" hover-class="btn-hover">登录</button>
      </view>
    </form>
  </view>
</template>

<script>
  import {mapActions} from 'vuex'
  import tuiIcon from "@/components/icon/icon"
  import tuiButton from "@/components/button/button"

  const util = require('../../utils/util.js');
  export default {
    components: {
      tuiIcon,
      tuiButton
    },
    data() {
      return {
        loginMessage: {
          username: "",
          password: ""
        }
      }
    },
    methods: {
      ...mapActions(['shiroLogin']),
      formLogin(e) {
        let userInfo = {
          username: e.detail.value.username,
          password: e.detail.value.password
        }
        if (util.isNullOrEmpty(userInfo.username)) {
          this.tui.toast('请输入用户名');
          return
        } else if (util.isNullOrEmpty(userInfo.password)) {
          this.tui.toast('请输入密码');
          return
        }
        this.shiroLogin(userInfo).then(res => {
            console.log("11111111",res);
          this.$store.state.isLogin = true
          this.tui.toast("登录成功", 2000, true);
            setTimeout(() => {
            uni.reLaunch({
              url: '../my/my'
            })
          }, 200);
        })
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "login.css";
</style>
